<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layOut="http://www.w3.org/1999/xhtml"
      layOut:decorator="layOut/layOut">
<head>
    <title>男女比例</title>
    <link rel="stylesheet" th:href="@{/pearAdminLayUI/admin/css/other/console1.css}" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="sexForm" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="sexForm1" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="sexForm2" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    const map = [[${map}]];
</script>
<script type="text/javascript">
    layui.use(['echarts'], function() {
        const $ = layui.jquery,
            echarts = layui.echarts;

        const data = [];
        for (const key in map) {
            data.push({"name":key, "value":map[key]})
        }
        const option = {
            title: {text: '', left: 'center'},
            tooltip: {trigger: 'item'},
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        const sexChart = echarts.init(document.getElementById('sexForm'), 'dark');
        const sexChart1 = echarts.init(document.getElementById('sexForm1'), 'dark');
        const sexChart2 = echarts.init(document.getElementById('sexForm2'), 'dark');
        option && sexChart.setOption(option);
        option && sexChart1.setOption(option);
        option && sexChart2.setOption(option);
    });
</script>
</body>
</html>